웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
React UI 라이브러리 antd의 컴포넌트 중 하나인 Input에 대하여 알아봅니다.
<Input />
antd의 Input 컴포넌트는 html의 input 엘리먼트처럼 사용자의 입력을 받아 동작하는 인터렉션 구현시 사용할 수 있습니다. 아래는 Input 컴포넌트의 자세한 사용 방법과 property 및 예제를 함께 알아봅니다.
# antd의 Input 컴포넌트 정보 알아보기
Antd 컴포넌트 중 하나인 Input 컴포넌트는 방문자의 입력폼 요소 중 하나로 문자열을 등의 입력값을 전달 받아 서버에 전송하는 등 여러 작업을 수행할 수 있습니다.
아래는 Input 컴포넌트에 적용가능한 다양한 property(props) 정보입니다.
value // [Stiring] 입력값
defaultValue // [string] 기본 입력값
disabled // [true] 비활성화
size // [large | middle | small] Input 박스의 크기를 결정
maxLength // [number] 입력 최대값 설정
allowClear // 입력값을 비우는 아이콘과 기능을 수행
border // [boolean] 테두리 값의 적용 여부, (default: true)
readOnly // [boolean] 읽기 전용, 수정 불가능 설정
onChange // 입력값이 바뀌는 경우 콜백 호출
onPressEnter // 엔터키를 입력하는 경우 콜백 호출
위와 같은 property들을 설정하고 사용할 수 있습니다.
! antd property 예제 및 팁, 정보
다음으로 몇 가지 자주 사용되는 설정 및 property 정보들에 대하여 알아봅니다.
@ 최대 사용 가능한 글자 수 설정, maxLength
만약 최대 글자 수를 설정하려면maxLength를 사용하면 됩니다. 아래는 최대 50자를 설정한 경우입니다.
<Input maxLength={50} />
@ 읽기 전용으로 사용하기
읽기 전용으로 사용하기 위해서 readOnly props를 추가하도록 합니다. 아래와 같이 코드를 입력합니다.<Input readOnly={true} />
위와 같이 readOnly 값으로 true / false 값을 설정할 수 있습니다. true인 경우 수정 할 수 없는 상태가 됩니다.
@ Textarea로 설정하여 사용하기
html 태그인 textarea처럼 여러 문단의 글을 입력 받기 위해서 사용하는 방법입니다. Input 컴포넌트는 아래와 같이 사용 목적에 따라 Textarea 또는 Search 등등으로 설정하여 사용할 수 있습니다.
<Input.TextArea />
const { TextArea } = Input;
<TextArea />
const { TextArea } = Input;
<TextArea />
위와 같이 주로 사용되며 동일하게 적용되어 나타납니다. 각각의 타입에 대하여 지원되는 property 정보가 존재합니다. 아래에서 더 자세히 알아보겠습니다.
@ Input.TextArea
textarea 태그 요소처럼 여러 줄을 사용하여 입력을 받을 수 있습니다.
onResize // 사이즈 조절시 콜백 호출
autoSize // 높이값 자동 조절 기능
@ Input.Search
검색을 목적으로 입력값을 요청할 경우 사용됩니다.
onSearch // 검색 아이콘 클릭시 콜백 호출
loading // 로딩 출력
@ Input.Password
패스워드 등 보안, 인증에 관련된 입력값이 필요할 때 사용합니다.
visibilityToggle // [boolean] 보여주기/숨기기 토글 기능
@ Input.Group
여러개의 input 태그 요소를 사용할 수 있습니다.
아래는 기본적인 Input 컴포넌트 예제입니다.
! antd Input 컴포넌트 예제보기
React에서 Input 사용하는 간단한 예제를 만들어보려고 합니다.
@ 상태 값과 연동하는 간단한 입력 폼 예제
첫 번째 예제는 상태 값을 연동하여 값을 가져오거나 변경하는 방법입니다.
<Input
value={this.keyword}
deafaultValue={this.keyword}
onChange={ this.vaildateSearch }
/>
value={this.keyword}
deafaultValue={this.keyword}
onChange={ this.vaildateSearch }
/>
위에서는 세 가지 props를 볼 수 있습니다. value, defaultValue, onChange가 그것입니다. 위 세 가지만으로 기본적인 입력폼을 만들 수 있습니다. 가장 중요한 value, defaultValue는 모두 해당 상태 값을 Input 폼에 출력합니다. 이때 value는 값이 변경되는 경우 변경된 값을 이 후에 반영되는 상태값이 존재합니다. 만약 초기값 한 번만 필요한 경우라면 deafaultValue를 사용합니다. 그리고 onChange는 값이 변경될 경우 새롭게 값을 업데이트 합니다.
@ 입력 후 상태 값, state를 업데이트 하는 예제
두번째 예제 코드입니다. 템플릿에 아래와 같이 코드를 추가하였습니다.
<Input
onChange={ this.vaildateSearch }
onPressEnter={ this.submitSearch }
placeholder="Search ..."
/>
onChange={ this.vaildateSearch }
onPressEnter={ this.submitSearch }
placeholder="Search ..."
/>
위 코드를 실행하면 간단한 input 태그가 나타나게 됩니다. 위 코드에 적용된 props는 많이 사용되는 props 요소로 각각 다음의 기능을 수행합니다.
onChange // 값이 바뀌는 경우 콜백 함수 실행
onPressEnter // 엔터키를 입력하는 경우 콜백 함수 실행
placeholder // 입력값이 없는 경우 표시하는 텍스트 문자
키를 Input 화면뷰에 입력할 경우 onChange의 콜백 함수인 vaildateSearch()를 실행하게 됩니다. 입력값을 검증하기 위해서 onChange를 사용하였습니다.
validateSearch = (event) => {
const keyword = event.target.value;
const cond1 = keyword.length >= 2; // 입력값이 2자 이상인 경우 true를 반환
if (cond1) {
... // 조건이 true인 경우 뭔가를 수행함
}
};
const keyword = event.target.value;
const cond1 = keyword.length >= 2; // 입력값이 2자 이상인 경우 true를 반환
if (cond1) {
... // 조건이 true인 경우 뭔가를 수행함
}
};
여기서는 입력값을 keyword 이름의 변수에 저장하고 첫 번째 조건인 cond1 변수에 length를 사용해 2자 이상인 경우에만 true를 반환하도록 하였습니다. 즉 아래의 if문은 cond1을 만족하는 최소 길이 2자 이상인 경우에만 뭔가를 수행하게 됩니다. 이때의 뭔가는 정상적으로 입력되었음을 알리는 시각적 효과일 수 있습니다. 예를들어 입력폼의 테두리에 그린 표시를 하는 등등 검증을 통과하였을 경우 실행하는 코드가 되겠죠.
@ Input 엔터(enter) 키 입력시 동작
다음으로 엔터 키를 누르는 경우 submitSearch() 함수를 호출하게 됩니다. 즉 입력된 결과를 서버에 전송하는 등의 처리를 수행할 수 있죠. 아래는 submitSearch() 코드입니다.
submitSearch = (event) => {
const keyword = event.target.value;
window.open('/search?keyword=' + keyword , '_self');
};
const keyword = event.target.value;
window.open('/search?keyword=' + keyword , '_self');
};
입력값은 이벤트 객체를 사용하여 가져옵니다. event.target.value를 사용하여 변수 keyword에 저장하였습니다. 그리고 /search 이름의 페이지로 이동하는데 /search?keyword=<입력값> 형태로 파라미터를 전달하고 페이지가 열리게 됩니다.
아래의 글도 찾고 계시지 않나요?
- 자바스크립트를 사용하여 input 태그에 한글 입력 막기, 한글 불가 방법
antd Table 컴포넌트 체크박스 사용 방법 및 예제
antd Input 태그에 focus 이벤트 사용하기- antd Dropdown 컴포넌트에서 파라미터를 overlay로 전달하는 방법
antd table 컴포넌트 페이지네이션 삭제하기- [react] antd table 컴포넌트 정보 및 예제
- React antd 라이브러리 Datepicker 컴포넌트
- [React] antd 라이브러리 Button 컴포넌트 알아보기
[React] antd 라이브러리 checkbox, radio 사용방법 및 예제